<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-gift>
				<div class="gift-box">
					<div style="margin-left:10px;font-size:15px">礼金状态：</div>
					<el-select
						size="mini"
						filterable
						placeholder="礼金状态"
						v-model="giftState"
						style="margin-right: 1em;width:120px;"
						@change="val => crud.refresh({ status: val, page: 1 })"
					>
						<el-option value="" label="全部"></el-option>
						<el-option label="正常" :value="1"></el-option>
						<el-option label="停止" :value="2"></el-option>
					</el-select>
				</div>
			</template>
			<template #slot-date>
				<date-picker
					@change="val => crud.refresh({ startTime: val[0], endTime: val[1], page: 1 })"
					@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
				></date-picker>
			</template>
			<!-- 跳转详情 -->
			<template #slot-row-stop="{scope}">
				<el-button type="text" v-if="scope.row.status == 1" @click="gifStop(scope.row.id)"
					>停止</el-button
				>
			</template>
			<!-- 京礼金信息 -->
			<template #table-column-info="{scope}">
				<div class="info">
					<p>
						批次id：
						<span>{{ scope.row.giftCouponKey }}</span>
					</p>
					<p>
						标题：
						<span>{{ scope.row.skuName }}</span>
					</p>
					<p>
						总数：
						<span>{{ scope.row.amount }}</span>
					</p>
					<p>
						领取次数：
						<span>{{ scope.row.receiveNum }}</span>
					</p>
					<p>
						单个金额：
						<span>￥{{ scope.row.jljMoney }}元</span>
					</p>
					<p>
						开始时间：
						<span>{{ scope.row.receiveStartTime }}</span>
					</p>
					<p>
						结束时间：
						<span>{{ scope.row.receiveEndTime }}</span>
					</p>
					<p>
						使用有效期：
						<span>{{ scope.row.effectiveDays }}天</span>
					</p>
				</div>
			</template>
			<!-- 商品信息 -->
			<template #table-column-goodsInfo="{scope}">
				<div class="goodsInfo-box">
					<div class="info-img">
						<a :href="scope.row.link" target="_black">
							<img :src="scope.row.skuImage | image_ali" alt="" />
						</a>
					</div>
					<div class="info">
						<div class="info-box">
							<div class="title-box">
								<div class="name">
									<a
										:href="`http://item.jd.com/${scope.row.skuId}.html`"
										target="_blank"
										class="titel"
										v-if="scope.row.skuName"
									>
										{{ scope.row.skuName }}
									</a>
									<i
										class="el-icon-copy-document"
										v-copy="scope.row.skuName"
										title="复制商品名称"
									></i>
								</div>

								<p class="shop" v-if="scope.row.shopName">
									{{ scope.row.skuName }}
								</p>
							</div>
						</div>
						<p>
							商品ID：{{ scope.row.skuId }}
							<i
								class="el-icon-copy-document"
								v-copy="scope.row.skuId"
								title="复制商品ID"
							></i>
						</p>
						<p v-if="scope.row.couponInfo.couponMoney">
							优惠卷面额：{{ scope.row.couponInfo.couponMoney }}
						</p>
						<p v-if="scope.row.couponInfo.couponUrl">
							优惠卷链接：
							<i
								class="el-icon-copy-document"
								v-copy="scope.row.couponInfo.couponUrl"
								title="复制链接"
							></i>
						</p>
					</div>
				</div>
			</template>
			<!-- 活动类型 -->
			<template #table-column-activityType="{scope}">
				<el-tag v-if="scope.row.activityType == 1">百亿补贴</el-tag>
				<el-tag v-else-if="scope.row.activityType == 2">大转盘</el-tag>
			</template>
			<!-- 是否下架 -->
			<template #table-column-status="{scope}">
				<div>
					<el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
					<el-tag type="info" v-else>停止</el-tag>
				</div>
			</template>
			<template #table-column-jiliGift="{scope}">
				<div>总数：{{ scope.row.amount }}</div>
				<div>剩余：{{ scope.row.amount - scope.row.receiveNum }}</div>
				<div>商品领取数量：{{ scope.row.recordNum }}</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import moment from 'moment';

export default {
	data() {
		return {
			giftState: ''
		};
	},
	components: {
		DatePicker
	},

	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.goodsMenagement.jljRecord)
				.set('dict', {
					search: {
						query: 'status'
					},
					api: {
						delete: 'deleteByBatch'
					}
				})
				.set('tips', {
					delete: {
						confirm: '此操作会将本商品在新人免单列表删除，是否继续？',
						success: '取消成功',
						error: ''
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center',
							width: '60'
						},

						{
							label: '京礼金信息',
							prop: 'info',
							align: 'left',
							'min-width': 250
						},
						{
							label: '商品信息',
							prop: 'goodsInfo',
							align: 'left',
							'min-width': 300
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '京礼金数量',
							prop: 'jiliGift',
							align: 'center',
							'min-width': 150
						},
						{
							label: '已领取',
							prop: 'receiveNum',
							align: 'center',
							'min-width': 100
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							'min-width': 160,
							sortable: true
						}
					],

					op: {
						layout: ['slot-row-stop']
					},

					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					}
				})

				.set('layout', [
					['refresh-btn', 'slot-gift', 'slot-date', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])

				.done();

			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
		},
		gifStop(id) {
			this.$confirm('此操作将永久删除选中数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					console.log(id);
					this.$service.goodsMenagement.jljRecord
						.giftStop({
							id
						})
						.then(() => {
							this.$message({
								message: '停止成功',
								type: 'success'
							});
							this.crud.refresh();
							return;
						})
						.catch(err => {
							this.$message.error(err);
						});
				})
				.catch(() => {});
		}
	}
};
</script>
<style lang="scss" scoped>
.container {
	height: 100%;
}
.info-time {
	text-align: left;
}
.gift-box {
	display: flex;
	align-items: center;
}
.goodsInfo-box {
	display: flex;
	align-items: center;
	width: 100%;
	.info-img {
		width: 94px;
		height: 94px;
		flex-shrink: 0;
		border-radius: 10px;
		overflow: hidden;
		img {
			width: 100%;
			height: 100%;
		}
	}
	// img {
	// 	width: 50px;
	// 	height: 50px;
	// 	/*border-radius: 50%;*/
	// 	flex-shrink: 0;
	// }
	.info {
		width: calc(100% - 100px);
		margin-left: 10px;
	}

	.info-box {
		margin: 10px 0;
		display: flex;
		align-items: center;
		.img-box {
			width: 500px;
			height: 500px;
			img {
				max-height: 100%;
				max-width: 100%;
			}
		}
		.title-box {
			flex: 1;
			height: 50px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow-x: hidden;
			.name {
				display: flex;
				align-items: center;
				a {
					font-size: 12px;
					width: 90%;
					color: $main-color;
					cursor: pointer;
					@include ellipsis(1);
				}
			}
		}
	}
}
.info {
	span {
		color: $main-color;
	}
	i {
		color: $main-color;
		cursor: pointer;
		font-size: 14px;
	}
}
.export {
	margin-right: 10px;
}
.record-detail {
	display: flex;
	justify-content: center;
	align-items: center;
	span {
		color: #4db7f3;
		border-radius: 50px;
		margin-bottom: 5px;
		cursor: pointer;
		display: block;
		padding: 4px 14px;
		transition: 0.3s;
		&:hover {
			opacity: 0.8;
		}
	}
}
::v-deep .el-dialog {
	.el-form {
		.el-col {
			.el-col-8 {
				.el-form-item__label {
					width: 120px !important;
				}
			}
		}
	}
}

::v-deep .el-select {
	margin-left: 10px;
}
</style>
